<template>
  <div class="divCont">
    <div class="lineChart">
      <LakerEcharts ref="lineChart" :option="dataOption" width="100%" height="100%" />
    </div>
  </div>
</template>
<script>
import isepApi from '@/api/isep'
import constant from '@/utils/constant.ts'
import LakerEcharts from '@/components/lakerEcharts/index.vue'

export default {
  name: 'IsepCenterLeftcenter',
  props: {
    data: { type: Object, default: () => {} }
  },
  components: { LakerEcharts },
  data() {
    return {
      dataOption: {
        backgroundColor: '',
        grid: {
          top: '12%',
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: ''
            }
          }
        },
        animation: false,
        legend: {
          x: 'center',
          y: 'top',
          itemHeight: 18,
          data: ['#1供电煤耗', '#2供电煤耗'],
          textStyle: {
            fontSize: 12,
            fontFamily: 'Microsoft YaHei',
            color: '#7AA8B5',
            padding: [20, 20, 0, 0]
          }
        },
        xAxis: [
          {
            type: 'category',
            nameTextStyle: {
              color: '#FFFFFF',
              fontFamily: 'Microsoft YaHei',
              fontSize: 12
            },
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#A1D5FA'
              }
            },
            axisLabel: {
              color: '#A1D5FA',
              fontFamily: 'Microsoft YaHei',
              fontSize: 12
            },
            axisTick: {
              length: 0
            },
            splitLine: {
              show: false
            },
            data: constant.timeArray
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：g/kWh',
            nameTextStyle: {
              color: '#FFFFFF',
              fontFamily: 'Microsoft YaHei',
              fontSize: 12
            },
            splitNumber: 5,
            axisLabel: {
              color: '#A1D5FA',
              fontFamily: 'Microsoft YaHei',
              fontSize: 12
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#363e83 ',
                width: 1,
                type: 'dashed'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#A1D5FA'
              }
            }
          }
        ],
        series: [
          {
            name: '#1供电煤耗',
            type: 'line',
            data: [0],
            smooth: true
          },
          {
            name: '#2供电煤耗',
            type: 'line',
            data: [1],
            smooth: true
          }
        ],
        color: ['#43c628', '#F2A602', '#1BD8F5'],
        symbolList: ['circle']
      },
      dataModel: {},
      dayDataModel2: {},
      monthDataModel2: {},
      yearDataModel2: {}
    }
  },
  watch: {
    data(newValue) {
      Object.assign(this.dataModel, newValue)
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      let xdata = [[], []]
      let params = {
        tagNames: ['A1_gdbmF', 'A2_gdbmF'],
        interVal: 5
      }
      let maxLength = 0
      isepApi.getLoadCurve(params).then((res) => {
        if (res.code === 200) {
          for (let j = 0; j < res.data.length; j++) {
            let a = []
            for (let i = 0; i < res.data[j].length; i++) {
              a[res.data[j][i].indexValue] = res.data[j][i].avgValue
            }
            xdata[j] = a
            if (xdata[j].length > maxLength) {
              maxLength = xdata[j].length
            }
          }
          for (let i = 0; i < xdata.length; i++) {
            let len = xdata[i].length
            for (let j = xdata[i].length; j < maxLength; j++) {
              xdata[i].push(xdata[i][len - 1])
            }
            for (let j = 1; j < xdata[i].length; j++) {
              if (xdata[i][j] == null) {
                xdata[i][j] = xdata[i][j - 1]
              }
            }
          }
          this.dataOption.series = [
            {
              name: '#1供电煤耗',
              type: 'line',
              data: xdata[0],
              smooth: true
            },
            {
              name: '#2供电煤耗',
              type: 'line',
              data: xdata[1],
              smooth: true
            }
          ]
        }
      })
    },
    initLoadData() {
      isepApi.getLoadCurveByRedis().then((res) => {
        if (res.code === 200) {
          this.dataModel = res.data
        }
      })
    },
    towNumber(val) {
      if (!val) return 0.0
      let val2 = isNaN(val) ? 0.0 : Math.round(val * 100) / 100

      return val2 < 0 ? 0.0 : val2
    }
  }
}
</script>
<style scoped lang="scss">
.divCont {
  width: 100%;
  height: 99%;
}
.lineChart {
  padding-top: 10px;
  width: 100%;
  height: 100%;
}
.website_sczb {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding-bottom: 5px;
}
.website_sczb div {
  padding-left: 5px;
  padding-right: 5px;
  font-size: 13px;
}

.content-table {
  padding-top: 15px;
  margin: 0 20px;
  text-align: center;
  width: 95%;
  height: 30%;
  border-collapse: collapse;
  th,
  tr,
  td {
    width: 8.3%;
    border: 1px solid #147dcf;
    text-align: center;
    font-size: 12px;
    .content-year {
      color: gold;
    }
    .content-title {
      color: chartreuse;
    }
  }
}
.title {
  width: 100%;
  text-align: center;
  color: chartreuse;
  font-size: 20px;
}
</style>
